

<header class="acl-permission__header">
  {{#if userHasAclAccess}}
    <i class="fa fa-check-circle-o fa-lg acl-permission__success" title="You are in this dataset's ACL"></i>

    <div class="acl-permission__meta">
      <strong class="acl-permission__success acl-permission__meta__header">
        You have access to this dataset
      </strong>
    </div>

    <button
      class="nacho-button--large nacho-button--inverse remove-acl-access-button"
      onclick={{perform removeAccessTask}}>
      {{#if removeAccessTask.isRunning}}
        {{pendulum-ellipsis-animation}}
      {{else}}
        <i class="fa fa-ban" aria-hidden="true"></i>

        Remove My Access
      {{/if}}
    </button>
  {{else}}
    <i class="fa fa-ban fa-lg acl-permission__reject" title="You are not in this dataset's ACL"></i>

    <div class="acl-permission__meta">
      <strong class="acl-permission__reject acl-permission__meta__header">
        You currently do not have access to this dataset
      </strong>
    </div>
  {{/if}}

</header>


{{#unless userHasAclAccess}}
  <hr class="acl-permission__separator">

  <form class="acl-form" {{action (perform requestAccessAndCheckAccessTask) on="submit"}}>
    <h4 class=" acl-form__meta acl-form__header">
      Request Access
      {{more-info
        link=@aclMoreInfoLink
        tooltip="Click for more information on ACL Access"
      }}
    </h4>
    <div class="acl-form__meta">
      <h4 class="acl-form__meta__header">Why do you need access?</h4>
      <p class="acl-form__meta__content ">Please add the business reason why you need to access this data.</p>

      {{textarea
        value=(mut userAclRequest.businessJustification)
        class="acl-form__content"}}
    </div>


    <div class="acl-form__meta">
      <h4 class="acl-form__meta__header">What type of access do you need?</h4>

      {{ember-selector
        values=accessTypeDropDownOptions
        selected=userAclRequest.accessType
        selectionDidChange=(action "onAccessTypeChange")
      }}
    </div>


    <div class="acl-form__meta">
      <h4 class="acl-form__meta__header">When should your access expire?</h4>
      <p class="acl-form__meta__content ">If not specified, defaults to 2 days from now</p>

      {{#basic-dropdown as |dropdown|}}
        <input type="text"
               placeholder="Enter Date"
               data-ebd-id="{{dropdown.uniqueId}}-trigger"
               class="acl-form__cal-input-trigger"
               value={{if userAclRequest.expiresAt (moment-format (mult userAclRequest.expiresAt 1000) 'DD-MMM-YYYY')}}
               onclick={{dropdown.actions.toggle}}
               readonly>

        {{#dropdown.content class="acl-form__cal-dropdown"}}
          {{#power-calendar
            selected=selectedDate
            center=centeredDate
            class="acl-expiration-calendar"
            onSelect=(action "onExpirationDateChange" value="date")
            onCenterChange=(action (mut centeredDate) value="date") as |calendar|}}

            <nav class="ember-power-calendar-nav">

              <button
                type="button"
                class="ember-power-calendar-nav-control"
                onclick={{action calendar.actions.moveCenter -1 'month'}}>
                &lt;
              </button>
              <div class="ember-power-calendar-nav-title">
                {{moment-format calendar.center 'MMMM YYYY'}}

                <p>
                  {{if hasValidExpiration (concat "Expires " (moment-from-now calendar.selected))}}
                </p>

              </div>
              <button
                type="button"
                class="ember-power-calendar-nav-control"
                onclick={{action calendar.actions.moveCenter 1 'month'}}>
                &gt;
              </button>
            </nav>

            {{calendar.days minDate=minSelectableExpirationDate maxDate=maxSelectableExpirationDate}}

          {{/power-calendar}}
        {{/dropdown.content}}
      {{/basic-dropdown}}
    </div>

    <div class="comment-new__actions">
      <span class="disabled-button-hover-state-trap">
        {{#unless hasValidAclRequest}}

          {{tooltip-on-element
            text="Please provide a business reason for this request"
          }}

        {{/unless}}

        <button
          type="submit"
          class="nacho-button--large nacho-button--inverse"
          disabled={{not hasValidAclRequest}}>

          {{#if requestAccessAndCheckAccessTask.isRunning}}
            {{pendulum-ellipsis-animation}}
          {{else}}
            Submit
          {{/if}}

        </button>
      </span>

      <button
        type="reset"
        class="nacho-button--large nacho-button--secondary"
        {{action resetForm}}>
        Cancel
      </button>
    </div>
  </form>

{{/unless}}

<section id="acl-accessusers">
  <header>
    <h4 class="acl-table__header">Accounts with ACL Access</h4>
    {{#unless userHasAclAccess}}
      <p class="acl-form__meta__content ">
        These following accounts have been granted access. if you'd like access to the data, please request above
      </p>
    {{/unless}}
  </header>
  {{#if aclsWithAvatarProps}}

    {{#dataset-table
      class="nacho-table nacho-table--stripped"
      fields=aclsWithAvatarProps
      sortColumnWithName=sortColumnWithName
      filterBy=filterBy as |table|
    }}
      {{#table.head as |head|}}
        {{#head.column}}
          Principal
        {{/head.column}}

        {{#head.column}}
          Access Type
        {{/head.column}}

        {{#head.column}}
          Business Justification
        {{/head.column}}

        {{#head.column}}
          Expiration
        {{/head.column}}
      {{/table.head}}

      {{#table.body as |body|}}
        {{#each (sort-by table.sortBy table.data) as |field|}}
          {{#body.row as |row|}}
            {{#row.cell}}
              {{avatars/avatar-image avatar=field.avatar}}

              {{field.principal}}
            {{/row.cell}}

            {{#row.cell}}
              {{field.accessType}}
            {{/row.cell}}

            {{#row.cell}}
              {{field.businessJustification}}
            {{/row.cell}}

            {{#row.cell}}
              {{if field.expiresAt (moment-from-now (mult field.expiresAt 1000)) '-'}}
            {{/row.cell}}
          {{/body.row}}
        {{/each}}

      {{/table.body}}
    {{/dataset-table}}

  {{else}}

    {{empty-state
      heading="There are no users in this dataset's ACL"
      subHead=(concat "If you feel this is in error, please contact " jitAclContact)
    }}

  {{/if}}
</section>
